<template>
  <div class="limited-row">
    <!-- 左侧内容 -->
    <div class="left-content">
      <div class="header-container input-title-container">
        <el-input v-model="item.title" placeholder="请输入标题" class="input-title"></el-input>
        <el-button type="primary" @click="save" class="button-title">保存</el-button>
      </div>
      <!-- 任务描述信息 -->
      <el-descriptions
        labelClassName="descriptions-label-class"
        content-class-name="descriptions-content-class"
        :column="4" border direction="vertical">
        <el-descriptions-item label="负责人">
          <project-member class="input-class" v-model="item.executorId" :project-id="item.projectId"></project-member>
        </el-descriptions-item>
        <el-descriptions-item label="测试状态">
          <el-select class="input-class" v-model="item.status" placeholder="请选择测试状态">
            <el-option
              v-for="dict in dict.type.test_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="结果">
          <el-select class="input-class" v-model="item.outcome" placeholder="请选择测试结果">
            <el-option
              v-for="dict in dict.type.test_outcome"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="优先级">
          <el-select class="input-class" v-model="item.priority" placeholder="请选择优先级">
            <el-option
              v-for="dict in dict.type.test_priority"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="工作项ID">{{ item.workItemId }}</el-descriptions-item>
        <el-descriptions-item label="项目id">{{ item.projectId }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ item.createdAt }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ item.updatedAt }}</el-descriptions-item>
      </el-descriptions>
      <div class="menu">
        <!-- 菜单 -->
        <el-menu
          :default-active="activeIndex"
          active-text-color="#409EFF"
          background-color="#fff"
          class="el-menu-demo"
          mode="horizontal"
          text-color="#666"
          @select="(key) => (activeIndex = key)"
        >
          <el-menu-item index="1">基本信息</el-menu-item>
          <el-menu-item index="2">前置条件</el-menu-item>
          <el-menu-item index="3">用例步骤</el-menu-item>
          <el-menu-item index="4">工作项</el-menu-item>
        </el-menu>
        <div v-if="activeIndex==='3'">
          <el-button @click="addStep">添加步骤</el-button>
        </div>
      </div>

      <!-- 动态内容展示 -->
      <div class="content-box">
        <div v-show="activeIndex === '1'">
          <p class="content-title">描述</p>
          <editor v-model="item.description" :min-height="280"/>
        </div>
        <div v-show="activeIndex === '2'">
          <p class="content-title">前置条件</p>
          <editor v-model="item.preconditions" :min-height="280"/>
        </div>
        <div v-show="activeIndex === '3'">
          <el-table :data="testStepList">
            <el-table-column label="编号" prop="stepId" width="100"></el-table-column>
            <el-table-column label="步骤" prop="description">
              <template slot-scope="scope">
                <el-input v-model="scope.row.description" placeholder="请输入实际结果"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="预期" prop="expectedValue">
              <template slot-scope="scope">
                <el-input v-model="scope.row.expectedValue" placeholder="请输入实际结果"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="outcome" width="130">
              <template slot-scope="scope">
                <el-button @click="deleteStep(scope.row.stepId)">删除步骤</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="activeIndex === '4'">
          <h1 class="page-title">{{ work.title || "任务详情" }}</h1>
          <!-- 任务描述信息 -->
          <el-descriptions
            labelClassName="descriptions-label-class"
            content-class-name="descriptions-content-class"
            :column="4" border direction="vertical">
            <el-descriptions-item label="负责人">
              <user-and-avatar :user-id="work.assignee"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <dict-tag :options="dict.type.work_status" :value="work.status"/>
            </el-descriptions-item>
            <el-descriptions-item label="优先级">
              <dict-tag :options="dict.type.priority" :value="work.priority"/>
            </el-descriptions-item>
            <el-descriptions-item label="类型">
              <dict-tag :options="dict.type.work_type" :value="work.type"/>
            </el-descriptions-item>
            <el-descriptions-item label="开始时间">{{ work.startDate }}</el-descriptions-item>
            <el-descriptions-item label="截至时间">{{ work.dueDate }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ work.createdAt }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ work.updatedAt }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>

    <!-- 右侧内容 -->
    <div class="right-content">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1" title="执行信息">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class"
                           :column="1" border>
            <el-descriptions-item label="测试计划ID">{{ item.testPlanId }}</el-descriptions-item>
            <el-descriptions-item label="执行人">
              <user-and-avatar :user-id="item.executorId"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="优先级">
              <dict-tag :options="dict.type.test_priority" :value="item.priority"/>
            </el-descriptions-item>
            <el-descriptions-item label="执行结果">
              <dict-tag :options="dict.type.test_outcome" :value="item.outcome"/>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>

        <el-collapse-item name="5" title="工时">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="预估工时">
              <el-input-number placeholder="请输入工作量估算" v-model="item.estimatedWorkingHours"
                               controls-position="right" :min="0" ></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="登记工时">
              <el-input-number placeholder="请输入剩余工作量" v-model="item.registerWorkingHours"
                               controls-position="right" :min="0" :max="item.estimatedWorkingHours"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="剩余工时">
              {{ Math.max(item.estimatedWorkingHours - item.registerWorkingHours, 0) }}
            </el-descriptions-item>
            <el-descriptions-item label="工时进度">
              <el-progress
                :percentage="(Math.min(item.registerWorkingHours/item.estimatedWorkingHours,1)*100).toFixed(0)*1.0||0"></el-progress>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="6" title="基础信息">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="更新人">
              <user-and-avatar :userId="item.updatedBy"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ item.updatedAt }}</el-descriptions-item>
            <el-descriptions-item label="创建人">
              <user-and-avatar :userId="item.createdBy"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ item.createdAt }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>
<script>
import UserAndAvatar from "@/components/UserAndAvatar/index.vue";
import {editTestAndTestStepVo, getTest} from "@/api/projectUser/userTest";
import {addTestStep, delTestStep, listAllTestStep} from "@/api/projectUser/userTestStep";
import {getDicts} from "@/api/system/dict/data";
import ProjectMember from "@/components/ProjectMember/index.vue";
import {getWorkById} from "@/api/projectUser/userWork";

export default {
  name: "UpTest",
  components: {ProjectMember, UserAndAvatar},
  dicts: [
    'test_status',      // 测试状态
    'test_outcome',     // 测试结果
    'test_priority',    // 测试优先级
    'work_status',      // 工作状态
    'priority',         // 优先级
    'work_type',        // 工作类型
    'work_risk'         // 工作风险
  ],
  data() {
    return {
      work:{},
      testStatusType: [],
      nowOutCome: '',
      testStepList: [],
      activeIndex: '1',
      activeNames: ['1', '2', '3', '4', '5', '6'], // 默认展开所有折叠项
      item: {},
      childItem: [],
      fileList: [],
    };
  },
  props: {
    testId: {
      type: Number,
      default: 1,
    },
  },
  watch: {
    testId: {
      handler() {
        this.getData()
      },
      immediate: true
    }
  },
  created() {
    this.getData()
  },
  methods: {
    deleteStep(id) {
      delTestStep(id).then(res => {
        this.$modal.msg("删除成功");
        this.getData()
      })
    },
    addStep() {
      addTestStep(this.testId, {}).then(res => {
        this.getData()
      })
    },
    getData() {
      getDicts("test_outcome").then(response => {
        this.testStatusType = response.data;
      })
      getTest(this.testId).then(({data}) => {
        this.item = data;
        getWorkById(this.item.workItemId).then(({data}) => {
          this.work=data
        })
      });
      listAllTestStep(this.testId, {}).then(({data}) => {
        this.testStepList = data;
      });
    },
    save() {
      // 实现保存逻辑
      editTestAndTestStepVo({test: this.item, testSteps: this.testStepList}).then(() => {
        this.$modal.msgSuccess("保存成功");
        this.$emit('upData')
      })
    },
  }
};
</script>
<style lang="scss" scoped>


.result-container {
  display: flex;
  flex-direction: column;
}

.tag-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.button-container {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.new-defect {
  background-color: #f56c6c;
  color: white;
}

.new-defect:hover {
  background-color: #d9534f;
}

.save {
  background-color: #409eff;
  color: white;
}

.save:hover {
  background-color: #337ecc;
}
</style>
